<template>
  <h1 class="tc">图书管理</h1>
  <main>
    <div class="bg">
      <p><b>添加</b></p>
      <p>
        编号：<input v-model="num" type="text">
        名称：<input v-model="name" type="text"> &nbsp;
        <button @click="onSub">提交</button>
      </p>
      <p class="tc">图书总数：{{ arr.length }}</p>
    </div>
    <table class="tc">
      <tr class="bg">
        <th>编号</th>
        <th>名称</th>
        <th>时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="el,index in arr" :key="el.num">
        <td>{{ el.num }}</td>
        <td>{{ el.name }}</td>
        <td>{{ el.time }}</td>
        <td><a href="#" @click="onDel(index)">删除</a></td>
      </tr>
    </table>
  </main>
  
</template>

<script setup>
import { ref } from 'vue';
const name = ref('红楼梦');
const num = ref('5');

const onSub = ()=>{
  // 寻找是否有num
  // let index = arr.value.findIndex(el=>{
  //   if(el.num==num.value){
  //     return true;
  //   }
  // })
  // console.log(index);
  // if(index>-1){
  //   alert("编号已存在，换一个！");
  //   return;
  // }
  if(arr.value.findIndex(el=>el.num==num.value)!=-1){
    alert("编号已存在，换一个！");
      return;
  }
  //获取当前时间
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth()+1;
  let day = date.getDate();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let s = date.getSeconds();
  arr.value.push({
    num:num.value,
    name:name.value,
    time:''+year+month+day+" "+hours+":"+minutes+":"+s
  })
}

// 图书数组
const arr = ref([
{num:1,name:'水浒传',time:2653},
{num:2,name:'水浒传2',time:374637647374},
{num:3,name:'水浒传3',time:2653}
])
//删除 diff
const onDel = index=>{
  console.log(index);
  arr.value.splice(index,1);
}



</script>

<style scoped>
.tc{text-align: center;}
main{width: 550px;margin: 0 auto;}
main table{width: 100%;}
.bg{background-color: rgb(243, 220, 171);padding: 10px;}
</style>